<li class="group" data-test-subscription-list-item>
  <button
    class="text-body-300 text-color-foreground-primary flex items-center space-x-6 hover:cursor-pointer bg-transparent hover:bg-color-surface-action border-0 w-full h-full justify-between py-3 px-3.5 transition-colors"
    type="button"
    {{on "click" this.toggleChecked}}
  >
    <div class="flex space-x-3 items-center">
      {{#let (get-product-id @productArea) as |productID|}}
        <Hds::IconTile
          @size="small"
          @logo={{productID}}
          @icon={{unless productID "folder"}}
        />
      {{/let}}
      <div data-test-subscription-list-item-name>
        {{@productArea}}
      </div>
    </div>
    <div class="shrink-0 flex items-center justify-end relative">
      <Hds::Form::Toggle::Base
        tabindex="-1"
        name="toggle-subscription"
        aria-label={{if this.isChecked "Unsubscribe" "Subscribe"}}
        @value="enable"
        checked={{this.isChecked}}
      />
    </div>
  </button>
</li>
